/*Stylesheet for Recipe Site */
body
{
background-color: #eeeeee;
font-family: Verdana, sans-serif;
font-weight: 400;
line-height: 1.75;
color : #222222;
}

h1, h2, h3, h4, h5
{
margin: 0;
margin-bottom: 1.4em;
font-damily: Roboto, sans-serif;
font-weight: 500;
line height: 1.3em;
text-transform: capatalize;
letter-spacing: 1px;
}

h2
{
font-size: 2.4em;
}

h4
{
font-size: 1.6em;
}

h5
{
font-size: 1.3em;
}

/*======Navbar======*/

.navbar
{
align-items: center;
justify-content: center;
}

.nav-center
{
width: 100vw;
max-width: 1120px;
}

.nav-header
{
height: 10em;
justify-content: space-between;
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr ;
}

.nav-header img
{
width: 200px;
}

.nav-logo
{
display: flex;
align-items: flex-start;
}

.nav-links
{
display: grid;
grid-template-columns: repeat(3, 1fr) ;
gap:1em ;
overflow: hidden ;
flex-direction: row ;
transition: 0.3 ease-in-out all;
}

.show-links
{
height: 23.9em;
}

.nav-link
{
background: #0f172A;
display: block;
text-align: center;
font-size: 1.75em;
text-transform: capitalize;
color: #f8fafc;
border-radius: 0.5em;
letter-spacing: 1px;
transition: 0.3s ease-in-out all;
width : 10vw; 
}

.nav-link:hover
{
color: #645CFF;
}

/*=======page======*/

.page
{
width: 90vw;
max-width: 1120px;
margin: 0 auto;
padding-top: 2em;
min-height: calc(100vh - 10em);
}

/*======Footer======*/

.page-footer
{
text-align: center;
height: 4em;
display: flex;
align-items: center;
justify-content: center;
backgroudn: #222222;
color: #FFFFFF;
}

.page-footer h5
{
margin-top: 0;
margin-bottom: 0;
}

.page-footer p
{
margin-bottom: 0;
}

/*======hero======*/

.hero
{
height: 40vh;
position: relative;
margin-bottom: 2em;
background-color: #f8fafc;
border-radius: 0.25em;
}

.hero-container
{
position: absolute;
top: 0;
left : 0;
width: 100%;
height:100%;
display:flex;
align-items: center;
justify-content: center;
border-radius: 0.25em;
}

.hero-text
{
color: #ffffff;
text-align: center;
}

/*======Recipies Template======*/

.recipe-hero
{
display: grid;
gap: 3em;
grid-template-columns: 4fr 5fr;
align-items: center;
}

.recipe-hero-img
{
height:300px;
border-radius: 0.5em;
}
.recipe-info p
{
color: #475569:
}

.recipe-icons
{
display: grid;
grid-template-colums: repeat(3, 1fr);
gap: 1em;
margin: 2em 0;
text-align: center;
}

.recipe-tags
{
disply: flex;
align-items: center;
flex-wrap: wrap;
font-size: 0.7em;
font-weight: 600;
}

.recipe-tags a
{
background: #645CFF;
border-radius: 0.5em;
color: #FFFFFF;
padding: 0.05em 0.5em;
margin: 0 0.25em;
text-transform: capatalize;
}

.recipe-content
{
diplay : grid;
grid-template-colums: 2fr 1fr;
gap: 2em 5em;
padding: 3em 0em;
}

.single-instruction header
{
display: grid;
grid-template-colums: auto 1fr;
gap: 1.5em;
align-items: center;
}

.single-instructions header p
{
text-tansform: uppercase;
font-weight: 600;
color: #645cff;
margin-bottom: 0;
}

.second-column
{
  display:grid;
  row-gap: 2em;
}

.single-ingridient
{
border-bottom: 2px solid #CBD5E1;
padding-bottom: 0.75em;
color: #3c3799;
}

.recipes-container
{
display : grid ;
gap : 2em 1em ;
}

.recipes-list
{
display : grid ;
grid-template-columns: repeat(3 ,1fr);
gap : 2em 1em;
padding-bottom : 3em;
}

.recipe-img
{
height:15em;
border : 0.5em;
margin-bottom:1em;
}

.tags-container
{
order : 1 ;
display : flex ;
flex-direction: column ;
padding-bottom: 3em ;
}

.tags-contianer h4
{
margin-bottom : 0.5em ;
font-weight:500;
}

.tags-list
{
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
}

.tags-list a
{
text-transform : capatalize ;
display : block ;
color : #64748B ;
transition: 0.3 ease-in-out all;
}

.tags-list a:hover
{
color : #645CFF ;
}